<script setup lang="ts">
import { ref, nextTick, onMounted } from "vue";
import { formRules } from "../utils/rule";
import { FormProps } from "../utils/types";
import { regionData, CodeToText, convertTextToCode } from "@/utils/chinaArea";
import { getLabelPage } from "@/api/basicArchives/labelmanag";
import { DictSelect } from "@/components/common/DictSelect";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: "",
    depositoryCode: "",
    wtCode: "",
    depositoryName: "",
    type: undefined,
    labelList: [],
    country: "",
    province: "",
    city: "",
    area: "",
    address: "",
    contacts: "",
    contact: "",
    des: "",
    status: undefined,
    createUserName: "",
    gmtCreate: "",
    updateUserName: "",
    gmtModified: "",
    labelIdList: []
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

const options = [
  {
    value: 0,
    label: "门店仓"
  },
  {
    value: 1,
    label: "供应链总仓"
  },
  {
    value: 2,
    label: "区域仓"
  }
];

let options1 = ref([]);
const params = {
  pageNum: 1,
  pageSize: 999,
  categoryId: 41
};

const selectedOptions = ref(["110000", "110100", "110101"]);
const handleChange = value => {
  // console.log(value);
  console.log(newFormInline.value);
};

async function labkeList() {
  const { data } = await getLabelPage(params);
  options1.value = data.records;
}

onMounted(() => {
  labkeList();
});

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="100px"
  >
    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="仓库名称" prop="depositoryName">
          <el-input
            v-model="newFormInline.depositoryName"
            clearable
            placeholder="请输入仓库名称"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="仓库类型" prop="type">
          <DictSelect
            v-model="newFormInline.type"
            dict-type="HOUSE_TYPE"
            clearable
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="仓库标签" prop="labelIdList">
          <el-select
            v-model="newFormInline.labelIdList"
            multiple
            placeholder="请选择仓库标签"
            clearable
            filterable
          >
            <el-option
              v-for="item in options1"
              :key="item.id"
              :label="item.labelName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="国家省市区" prop="country">
          <el-cascader
            v-model="newFormInline.country"
            :options="regionData"
            clearable
            class="w-full"
            @change="handleChange"
          />
          <!-- <div>
            区域码转汉字：
            {{ CodeToText[selectedOptions[0]] }},
            {{ CodeToText[selectedOptions[1]] }},
            {{ CodeToText[selectedOptions[2]] }}
          </div>
          <div>
            汉字转区域码：
            {{
              convertTextToCode(
                CodeToText[selectedOptions[0]],
                CodeToText[selectedOptions[1]],
                CodeToText[selectedOptions[2]]
              )
            }}
          </div> -->
        </el-form-item>
      </el-col>
    </el-row>

    <!-- <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="仓库编码" prop="depositoryCode">
          <el-input
            v-model="newFormInline.depositoryCode"
            clearable
            placeholder="请输入仓库编码"
          />
        </el-form-item>
      </el-col>
    </el-row> -->

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="万里牛编码" prop="wtCode">
          <el-input
            v-model="newFormInline.wtCode"
            clearable
            placeholder="请输入万里牛编码"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="详细地址" prop="address">
          <el-input
            v-model="newFormInline.address"
            clearable
            placeholder="请输入详细地址"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="联系人" prop="contacts">
          <el-input
            v-model="newFormInline.contacts"
            clearable
            placeholder="请输入联系人"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="联系方式" prop="contact">
          <el-input
            v-model="newFormInline.contact"
            clearable
            placeholder="请输入联系方式"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="备注" prop="des">
          <el-input
            v-model="newFormInline.des"
            placeholder="请输入备注信息"
            type="textarea"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
